<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			{{val}}
		</div>
	</body>
</html>
<script>
	const {createApp} = Vue;
	const app = createApp({
		data(){
			return{
				val:'1'
			}
		},
		methods:{
			
		},
		//创建APP实例之前要执行的函数
		beforeCreate() {
			console.log("beforeCreate函数执行了1")
		},
		//创建APP实例之后要执行的函数
		created(){
			console.log("created函数执行了2")
		},
		//在模板挂载之前要执行的函数
		beforeMount() {
			console.log("beforeMount函数执行了3")
		},
		//在模板挂载之后要执行的函数
		mounted() {
			console.log("mounted函数执行了4")
		},
		//数据被修改之前要执行的函数
		beforeUpdate() {
			console.log("beforeUpdate函数执行了5")
		},
		//数据被修改之后要执行的函数
		updated() {
			console.log("updated函数执行了6")
		},
		//卸载模板之前要执行的函数
		beforeUnmount() {
			console.log("beforeUnmount函数执行了7")
		},
		//卸载模板之后要执行的函数
		unmounted(){
			console.log("unmounted函数执行了8")
		}
	});
	const vm = app.mount("#app")
</script>